<template>
	<view>
		<view class="guding">
			<view class="ssk">
				<view class="search">
					<input class="search-shuru" placeholder="请输入游戏名称内的商品" placeholder-class="pla" />
				</view>
				<view>
					<button class="search-ss">
						搜索
					</button>
				</view>
			</view>
			<view class="xuanzeqi">
				<view class="yxqf" @click="yxqf">游戏区服 ▼</view>
				<view class="yxqf" @click="zhpx">综合排序 ▼</view>
				<view class="yxqf" @click="sx">筛选 ▼</view>
				<view class="twcw">
					<view class="tw" @click="tw" id="tuw">图文</view>
					<view class="cw" @click="cw" id="cunw">纯文</view>
				</view>
			</view>
			<view class="xuanqu" :class="{displaynone: xuanqu }">
				<view class="xuanqu-zt">
					<view class="xuanqu-zt_">
						<view class="yxqu">
							游戏区
						</view>
						<!-- <view :class="{displaynone:nima}"> -->
						<view class="qdcby" :class="{displaynone: qllw}">青龙乱舞</view>
						<view class="qdcby" :class="{displaynone: ddfy}">大地飞鹰</view>
						<view class="qdcby" :class="{displaynone: chyf}">沧海羽凡</view>
						<view class="qdcby" :class="{displaynone: bjyy}">把酒邀月</view>
						<view class="qdcby" :class="{displaynone: yszc}">云上之城</view>
						<!-- </view> -->

					</view>
					<view class="yxqu-" :class="{displaynone: qdcby}">
						<view class="yxqu-dw" @click="qinglong">青龙乱舞</view>
						<view class="yxqu-dw" @click="dadifeiying">大地飞鹰</view>
						<view class="yxqu-dw" @click="canghai">沧海羽凡</view>
						<view class="yxqu-dw" @click="bajiu">把酒邀月</view>
						<view class="yxqu-dw" @click="yunshang">云上之城</view>
					</view>
					<!-- 	<view class="fuwuqu-nm" :class="{displaynone:nimab}"> -->
					<view class="fuwuqu" :class="{displaynone: fuwuqu}">
						<view class="fuwuqu-">长生剑</view>
						<view class="fuwuqu-">孔雀翎</view>
						<view class="fuwuqu-">吹雪</view>
					</view>
					<view class="fuwuqu" :class="{displaynone: fuwuquo}">
						<view class="fuwuqu-">千秋月</view>
						<view class="fuwuqu-">孔雀翎</view>
					</view>
					<view class="fuwuqu" :class="{displaynone: fuwuqut}">
						<view class="fuwuqu-">凤凰集</view>
						<view class="fuwuqu-">孔雀翎</view>
					</view>
					<view class="fuwuqu" :class="{displaynone: fuwuqus}">
						<view class="fuwuqu-">彼岸花</view>
						<view class="fuwuqu-">孔雀翎</view>
					</view>
					<view class="fuwuqu" :class="{displaynone: fuwuquf}">
						<view class="fuwuqu-">长生剑</view>
						<view class="fuwuqu-">孔雀翎</view>
					</view>
					<!-- 	</view> -->
				</view>
				<view class="czqd">
					<view class="cz" @click="chongzhi">重置</view>
					<view class="qd" @click="queding">确定</view>
				</view>
			</view>
			<view class="paixu" :class="{displaynone: paixu}">
				<view class="paixu-">
					综合排序
				</view>
				<view class="paixu-">
					最新发布
				</view>
				<view class="paixu-">
					价格从低到高排序
				</view>
				<view class="paixu-">
					价格从高到低排序
				</view>
			</view>
			<view class="saixuan" :class="{displaynone: saixuan }">
				<scroll-view class="saixuan-" scroll-y="true">
					<view class="splx">
						<view class="splx-">商品类型</view>
						<view class="splx-zh">账号</view>
					</view>
					<view class="qujss">
						<view class="qujss-">区间搜索</view>
						<view class="jgmt">
							<view class="jiage">价格</view>
							<view class="ltom">
								<input class="lstomx" placeholder="最低值" placeholder-class="pla" id="shuru"
									 />
								<view class="hengxian">——</view>
								<input class="lstomx" placeholder="最高值" placeholder-class="pla" id="shuru"
									 />
							</view>
						</view>
						<view class="jgmt">
							<view class="jiage">功力值</view>
							<view class="ltom">
								<input class="lstomx" placeholder="最低值" placeholder-class="pla" id="shuru" />
								<view class="hengxian">——</view>
								<input class="lstomx" placeholder="最高值" placeholder-class="pla" id="shuru" />
							</view>
						</view>
						<view class="jgmt">
							<view class="jiage">魅力值</view>
							<view class="ltom">
								<input class="lstomx" placeholder="最低值" placeholder-class="pla" id="shuru" />
								<view class="hengxian">——</view>
								<input class="lstomx" placeholder="最高值" placeholder-class="pla" id="shuru" />
							</view>
						</view>
						<view class="jgmt">
							<view class="jiage">天赏积分</view>
							<view class="ltom">
								<input class="lstomx" placeholder="最低值" placeholder-class="pla" id="shuru" />
								<view class="hengxian">——</view>
								<input class="lstomx" placeholder="最高值" placeholder-class="pla" id="shuru" />
							</view>
						</view>
					</view>
					<view class="csfw">
						<view class="chushou" @click="csfw">出售范围 ▼</view>
						<view class="chushou-" :class="{displaynone:chushou}">
							<view class="chushou-c" @click="chuc" id="qc">全出</view>
							<view class="chushou-c" @click="chucc" id="zcg">只出游戏给安全中心</view>
							<view class="chushou-c" @click="chuccc" id="zcb">只出游戏不给安全中心</view>
						</view>
					</view>
					<view class="csfw" @click="csfwo">
						<view class="chushou">职业 ▼</view>
						<view class="chushou-" :class="{displaynone:chushouo}">
							<button class="chushou-c">全出</button>
							<button class="chushou-c">只出游戏给安全中心</button>
							<button class="chushou-c">只出游戏不给安全中心</button>
						</view>
					</view>
					<view class="csfw" @click="csfwt">
						<view class="chushou">热门 ▼</view>
						<view class="chushou-" :class="{displaynone:chushout}">
							<button class="chushou-c">全出</button>
							<button class="chushou-c">只出游戏给安全中心</button>
							<button class="chushou-c">只出游戏不给安全中心</button>
						</view>
					</view>
					<view class="csfw" @click="csfws">
						<view class="chushou">推荐 ▼</view>
						<view class="chushou-" :class="{displaynone:chushous}">
							<button class="chushou-c">全出</button>
							<button class="chushou-c">只出游戏给安全中心</button>
							<button class="chushou-c">只出游戏不给安全中心</button>
						</view>
					</view>
					<view class="konghe">

					</view>
				</scroll-view>
				<view class="czqd">
					<view class="cz" @click="zhichong"  @input="clearInput(e)">重置</view>
					<view class="qd" @click="quedingt">确定</view>
				</view>
			</view>
			<view class="xzq">
				<picker mode="multiSelector" @columnchange="bindMultiPickerColumnChange" :value="multiIndex"
					:range="multiArray">
					<view style="background-color:  #f5f5f5">
						{{ multiArray[0][multiIndex[0]] }}，
						{{ multiArray[1][multiIndex[1]] }}，
						{{ multiArray[2][multiIndex[2]] }}
					</view>
				</picker>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				chushouo: true,
				chushout: true,
				chushous: true,
				chushou: true,
				saixuan: true,
				fuwuquo: true,
				fuwuqut: true,
				fuwuqus: true,
				fuwuquf: true,
				fuwuqu: true,
				chyf: true,
				yszc: true,
				bjyy: true,
				ddfy: true,
				qllw: true,
				qdcby: false,
				scrollToview: '',
				xuanqu: true,
				paixu: true,
				multiArray: [
					['大区'],
					['电信', '网通', '峡谷之巅'],
					['黑色玫瑰', '艾欧尼亚', '裁决之地']
				],
				multiIndex: [0, 0, 0]
			}
		},
		methods: {
			// getElementHeight: function() {
			// 	const query = uni.createSelectorQuery().in(this);
			// 	query.select('.saixuan').boundingClientRect(data => {
			// 		this.$emit('heights', data.height);
			// 	}).exec();
			// },




	

			zhichong:function() {
				qc.style.color = "#000";
				zcg.style.color = "#000000";
				zcb.style.color = "#000000";
				qc.style.backgroundColor = "#ebe6ec";
				zcg.style.backgroundColor = "#ebe6ec";
				zcb.style.backgroundColor = "#ebe6ec";
				// this.searchName = ''
				// this.queryByInput()

			},
			chuccc: function() {
				zcb.style.backgroundColor = "#2d4ee1";
				zcb.style.color = "#fff";
				zcg.style.backgroundColor = "#ebe6ec";
				zcg.style.color = "#000000";
				qc.style.backgroundColor = "#ebe6ec";
				qc.style.color = "#000000";
			},
			chucc: function() {
				var chuc = document.getElementById('qc');
				var chucc = document.getElementById('zcg');
				var chuccc = document.getElementById('zcb');
				chucc.style.color = "#fff";
				chuc.style.color = "#000000";
				chuccc.style.color = "#000000";
				chuc.style.backgroundColor = "#ebe6ec";
				chucc.style.backgroundColor = "#2d4ee1";
				chuccc.style.backgroundColor = "#ebe6ec";
			},
			chuc: function() {
				var chuc = document.getElementById('qc');
				var chucc = document.getElementById('zcg');
				var chuccc = document.getElementById('zcb');
				chuc.style.color = "#fff";
				chucc.style.color = "#000000";
				chuccc.style.color = "#000000";
				chuc.style.backgroundColor = "#2d4ee1";
				chucc.style.backgroundColor = "#ebe6ec";
				chuccc.style.backgroundColor = "#ebe6ec";
			},
			cw: function() {
				var tuwen = document.getElementById('tuw');
				var cunwen = document.getElementById('cunw');
				cunwen.style.backgroundColor = "#2d4ee1";
				cunwen.style.color = "#fff";
				tuwen.style.color = "#878787";
				tuwen.style.backgroundColor = "#fff";
				console.log();
			},
			tw: function() {
				var tuwen = document.getElementById('tuw');
				var cunwen = document.getElementById('cunw');
				tuwen.style.color = "#fff";
				cunwen.style.color = "#878787";
				cunwen.style.backgroundColor = "#fff";
				tuwen.style.backgroundColor = "#2d4ee1";
				console.log();
			},
			quedingt: function() {
				this.saixuan = true;
			},
			csfwo: function() {
				this.chushouo = !this.chushouo;
			},
			csfwt: function() {
				this.chushout = !this.chushout;
			},
			csfws: function() {
				this.chushous = !this.chushous;
			},
			sx: function() {
				this.saixuan = !this.saixuan;
				this.paixu = true;
				this.xuanqu = true;
			},
			csfw: function() {
				this.chushou = !this.chushou;
			},
			queding: function() {
				this.xuanqu = !this.xuanqu;
			},
			chongzhi: function() {
				this.qdcby = false;
				this.qllw = true;
				this.ddfy = true;
				this.chyf = true;
				this.bjyy = true;
				this.yszc = true;
				this.fuwuqu = true;
				this.fuwuquo = true;
				this.fuwuqut = true;
				this.fuwuqus = true;
				this.fuwuquf = true;
				// if (this.qdcby){
				// 	this.qdcby = true;
				// 	this.qdcby = !this.qdcby;
				// }
				// else{
				// 	this.qdcby = false;
				// 	this.qdcby = this.qdcby;
				// };
				// if (this.qllw){
				// 	this.qllw = false;
				// 	this.qllw = !this.qllw;

				// }
				// else{
				// 	this.qllw = true;
				// 	this.qllw = this.qllw;
				// };
				// if (this.ddfy){
				// 	this.ddfy = false;
				// 	this.ddfy = !this.ddfy;

				// }
				// else{
				// 	this.ddfy = true;
				// 	this.ddfy = this.ddfy;
				// };
				// if (this.chyf){
				// 	this.chyf = false;
				// 	this.chyf = !this.chyf;

				// }
				// else{
				// 	this.chyf = true;
				// 	this.chyf = this.chyf;
				// };
				// if (this.bjyy){
				// 	this.bjyy = false;
				// 	this.bjyy = !this.bjyy;

				// }
				// else{
				// 	this.bjyy = true;
				// 	this.bjyy = this.bjyy;
				// };
				// if (this.yszc){
				// 	this.yszc = false;
				// 	this.yszc = !this.yszc;

				// }
				// else{
				// 	this.yszc = true;
				// 	this.yszc = this.yszc;
				// };
				// if (this.fuwuqu){
				// 	this.fuwuqu = false;
				// 	this.fuwuqu = !this.fuwuqu;

				// }
				// else{
				// 	this.fuwuqu = true;
				// 	this.fuwuqu = this.fuwuqu;
				// };
				// if (this.fuwuquo){
				// 	this.fuwuquo = false;
				// 	this.fuwuquo = !this.fuwuquo;

				// }
				// else{
				// 	this.fuwuquo = true;
				// 	this.fuwuquo = this.fuwuquo;
				// };
				// if (this.fuwuqut){
				// 	this.fuwuqut = false;
				// 	this.fuwuqut = !this.fuwuqut;

				// }
				// else{
				// 	this.fuwuqut = true;
				// 	this.fuwuqut = this.fuwuqut;
				// };
				// if (this.fuwuqus){
				// 	this.fuwuqus = false;
				// 	this.fuwuqus = !this.fuwuqus;

				// }
				// else{
				// 	this.fuwuqus = true;
				// 	this.fuwuqus = this.fuwuqus;
				// };
				// if (this.fuwuquf){
				// 	this.fuwuquf = false;
				// 	this.fuwuquf = !this.fuwuquf;

				// }
				// else{
				// 	this.fuwuquf = true;
				// 	this.fuwuquf = this.fuwuquf;
				// };
			},
			yunshang: function() {
				this.yszc = false;
				// this.yszc = !this.yszc;
				this.qdcby = true;
				this.fuwuquf = false;
			},
			bajiu: function() {
				this.bjyy = !this.bjyy;
				this.qdcby = !this.qdcby;
				this.fuwuqus = !this.fuwuqus;
			},
			canghai: function() {
				this.chyf = !this.chyf;
				this.qdcby = !this.qdcby;
				this.fuwuqut = !this.fuwuqut;
			},
			qinglong: function() {
				this.qllw = false;
				// this.qllw = !this.qllw;
				this.qdcby = true;
				this.fuwuqu = false;
			},
			dadifeiying: function() {
				this.ddfy = !this.ddfy;
				this.qdcby = !this.qdcby;
				this.fuwuquo = !this.fuwuquo;
			},
			zhpx: function() {
				this.paixu = !this.paixu;
				this.xuanqu = true;
				this.saixuan = true;
				// this.getElementHeight();
			},
			yxqf: function() {
				this.xuanqu = !this.xuanqu;
				this.paixu = true;
				this.saixuan = true;
				// setTimeout(() => {
				// this.getElementHeight();
				// }, 0)

			},

			bindMultiPickerColumnChange: function(e) {
				this.multiIndex[e.detail.column] = e.detail.value;
				switch (e.detail.column) {
					case 0: //拖动第1列
						switch (this.multiIndex[0]) {
							case 0:
								this.multiArray[1] = ['电信', '网通', '峡谷之巅'];
								this.multiArray[2] = ['黑色玫瑰', '艾欧尼亚', '裁决之地'];
								break;
						}
						this.multiIndex.splice(1, 1, 0);
						this.multiIndex.splice(2, 1, 0);
						break;
					case 1: //拖动第2列
						switch (
							this.multiIndex[0] //判断第一列是什么
						) {
							case 0:
								switch (this.multiIndex[1]) {
									case 0:
										this.multiArray[2] = ['黑色玫瑰', '艾欧尼亚', '裁决之地'];
										break;
									case 1:
										this.multiArray[2] = ['德玛西亚', '诺克萨斯'];
										break;
									case 2:
										this.multiArray[2] = ['峡谷之巅'];
										break;

								}
								break;

						};
						this.multiIndex.splice(2, 1, 0);
						break;
				}
				this.$forceUpdate();
			}
		}
	}
</script>

<style lang="scss">
	.xzq {
		margin-top: 15rpx;

	}

	.search-ss {
		width: 100rpx;
		height: 60rpx;
		border-radius: 30rpx;
		justify-content: center;
		font-size: 20rpx;
		margin-left: 20rpx;
		background-color: black;
		color: white;
		display: flex;
		align-items: center;
		white-space: nowrap;

	}

	.guding {
		width: 100%;
		padding-top: var(--status-bar-height);
		/* // position: absolute; */
		background-color: #f7f7f7;
		z-index: 1000;

		/* 	// border-top: 1px solid #838383; */
		.ssk {
			background-color: #ffffff;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
			height: 100rpx;

			.search {
				display: flex;
				align-items: center;
				border-radius: 40rpx;
				border: 3rpx solid black;
				height: 50rpx;
				width: 50%;

				.search-shuru {
					width: 600rpx;
					padding-left: 10rpx;
					height: 100%;
				}
			}

		}

	}

	.displaynone {
		display: none !important;
	}



	.saixuan {

		display: flex;
		justify-content: space-between;
		flex-direction: column;
		width: 100%;
		height: 800rpx;
		background-color: #ffffff;

		.czqd {


			display: flex;
			justify-content: space-between;
			width: 100%;
			height: 70rpx;
			// height: 70rpx;

			.cz {
				flex: 1;
				display: flex;
				justify-content: center;
				align-items: center;
				// text-align: center;
				background-color: #cecece;
				height: 100%;
				// line-height: 70rpx;
				font-size: 25rpx;
			}

			.qd {
				flex: 1;
				text-align: center;
				background-color: #2684ff;
				line-height: 70rpx;
				height: 100%;
				font-size: 25rpx;
			}
		}

		// position: fixed;
		.saixuan- {
			// margin-bottom: 20rpx;
			padding-left: 30rpx;
			display: flex;
			justify-content: space-around;
			height: 730rpx;
			flex-direction: column;
			width: 100%;

			.konghe {
				width: 100%;
				height: 50rpx;
			}

			.csfw {
				margin-top: 40rpx;
				display: flex;
				flex-direction: column;

				.chushou- {
					display: flex;
					margin-top: 20rpx;

					.chushou-c {
						margin-left: 20rpx;

						// display:inline-block;
						padding: 5rpx 20rpx;
						font-size: 25rpx;
						height: 50rpx;
						line-height: 50rpx;
						border-radius: 30rpx;
						text-align: center;
						background-color: #ebe6ec;
					}
				}

				.chushou {
					font-size: 25rpx;
					font-weight: 600;
				}
			}

			.qujss {
				margin-top: 40rpx;
				display: flex;
				flex-direction: column;

				.jgmt {
					padding-top: 20rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.ltom {
						width: 50%;
						padding-right: 50rpx;
						display: flex;
						justify-content: center;

						.pla {
							font-size: 25rpx;
							color: #616161;
							padding: 0;
						}

						.lstomx {
							border-radius: 30rpx;
							background-color: #e3e3e3;
							text-align: center;
							font-size: 25rpx;
							height: 50rpx;
							line-height: 50rpx;


						}

						.jiage {
							font-size: 25rpx;
							font-weight: 400;
							white-space: nowrap;
							width: 50%;

						}
					}
				}

				.qujss- {
					font-size: 25rpx;
					font-weight: 600;
				}
			}

			.splx {
				padding-top: 20rpx;
				display: flex;
				flex-direction: column;

				.splx-zh {
					background-color: #aac4ff;
					width: 100rpx;
					height: 50rpx;
					text-align: center;
					line-height: 50rpx;
					border-radius: 30rpx;
					font-size: 25rpx;
					margin-top: 15rpx;
				}

				.splx- {
					font-size: 25rpx;
					font-weight: 600;
				}
			}

		}
	}

	.paixu {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 320rpx;
		justify-content: space-around;
		background-color: #ffffff;

		.paixu- {
			font-size: 30rpx;
			padding-left: 120rpx;
		}
	}

	.xuanqu {
		background-color: #ffffff;
		width: 100%;
		height: 380rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		.czqd {

			display: flex;
			justify-content: space-between;
			width: 100%;
			// margin-bottom: 0;
			// height: 70rpx;

			.cz {
				flex: 1;
				display: flex;
				justify-content: center;
				align-items: center;
				// text-align: center;
				background-color: #cecece;
				height: 100%;
				// line-height: 70rpx;
				font-size: 25rpx;
			}

			.qd {
				flex: 1;
				text-align: center;
				background-color: #2684ff;
				line-height: 70rpx;
				height: 100%;
				font-size: 25rpx;
			}
		}

		.xuanqu-zt {
			width: 100%;
			display: flex;

			// flex: 1;
			.xuanqu-zt_ {
				display: flex;
				flex-direction: column;
				flex: 1;

				.qdcby {
					padding: 15rpx;
					font-size: 25rpx;
					text-align: center;
					// line-height: 60rpx;
					// width: 180rpx;
					// height: 60rpx;
				}

				.yxqu {
					font-size: 25rpx;
					text-align: center;
					// line-height: 60rpx;
					// width: 180rpx;
					// height: 60rpx;
					padding: 15rpx;

				}
			}
		}

		// .fuwuqu-nm{
		// 	flex: 1;
		// 	width: 100%;
		.fuwuqu {
			flex: 1;
			display: flex;
			flex-direction: column;

			width: 100%;

			.fuwuqu- {
				// border-bottom: 2rpx solid #838383;
				padding: 15rpx;
				display: flex;
				justify-content: space-around;
				flex-direction: column;
				text-align: center;
				font-size: 25rpx;
			}
		}

		// }

		/* // padding-bottom: var(--status-bar-height);
		// position: fixed;
		// background-color: #ffffff;
		// z-index: 1000; */
		.yxqu- {
			display: flex;
			flex-direction: column;
			flex: 1;
			width: 100%;

		}

		.yxqu-dw {
			// border-bottom: 2rpx solid #838383;
			text-align: center;
			display: flex;
			justify-content: space-around;
			flex-direction: column;
			padding: 15rpx;
			font-size: 25rpx;


		}

	}

	.xuanzeqi {
		height: 60rpx;
		background-color: #ffffff;
		display: flex;
		align-items: center;
		justify-content: space-around;
		border-top: 2rpx solid #838383;
		border-bottom: 2rpx solid #838383;

		.twcw {
			width: 120rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;


			.tw {
				color: #ffffff;
				background-color: #2d4ee1;
				font-size: 25rpx;
				width: 60rpx;
				height: 40rpx;
				text-align: center;
				line-height: 40rpx;
				border-radius: 20rpx;
			}

			.cw {
				color: #878787;
				font-size: 25rpx;
				width: 60rpx;
				height: 40rpx;
				text-align: center;
				line-height: 40rpx;
				border-radius: 20rpx;
			}
		}

		.yxqf {
			font-size: 25rpx;
			color: #878787;
		}
	}
</style>
